<template>

<!--  个人中心-->
  <div style="width: 100%;height: 100%;background-color:  #F1F1F1;">
    <div style="width: 100%;height: 20px"></div>

    <div style="  display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;width: 95%;margin-left: 14px;height:80px">
      <div  style="display: flex;align-items: center;">
        <div>
          <el-avatar :size="60"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
      </div>
      <div style="margin-left: 20px;margin-top:20px;display: inline-block;">  {{store.state.user.sysEmployee.empName}} </div>
      <div style="display: inline-block;margin-left: -70px;margin-top: 50px;font-size: 14px;color: grey">&nbsp;&nbsp;&nbsp;&nbsp;{{store.state.user.sysEmployee.dept.deptName}} / {{store.state.user.sysEmployee.employeePost.post.postName}}</div>
      <div style="margin: 25px;margin-left: 800px">
        <el-button @click="zhuanzheng()" style="position: absolute;right: 210px" type="primary" v-if="store.state.user.sysEmployee.empState == 0" >转正申请</el-button>
        <el-button @click="lizhi()" style="position: absolute;right: 90px" type="danger">离职申请</el-button>
      </div>
    </div>

    <div style="width: 100%;height: 30px"></div>
    <div style="background-color: white;width: 98%;margin-left: 15px;height: 77%">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 5px">
      <el-tab-pane label="员工信息" name="first">

        <div style="width: 270px;height: 400px;border-right: 2px solid #CCCCCC;display: inline-block;float: left">

          <el-avatar style="margin-left: 40px" shape="square" :size="180"  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />

          <el-upload
              ref="upload"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :limit="1"
              :on-exceed="handleExceed"
              :auto-upload="false"
          >
          <template #trigger>
            <el-button type="primary" style="margin-left: 80px;margin-top: 10px">修改头像</el-button>
          </template>
          </el-upload>
          <p></p>
          <el-row style="margin-top: 20px">
            <el-col :span="4"></el-col>
            <el-col :span="8"> <span style="font-size: 16px;color: grey">直接上级:</span> </el-col>
            <el-col :span="8">尖沙咀枪神</el-col>
          </el-row>

          <p></p>
          <el-row style="margin-top: 30px">
            <el-col :span="4"></el-col>
            <el-col :span="8"> <span style="font-size: 16px;color: grey">员工状态:</span> </el-col>
            <el-col :span="8">正式员工</el-col>
          </el-row>

          <p></p>
          <el-row style="margin-top: 30px">
            <el-col :span="4"></el-col>
            <el-col :span="9"> <span style="font-size: 16px;color: grey">最后登录时间:</span> </el-col>
            <el-col :span="8">2022-9-11</el-col>
          </el-row>

        </div>
        <div style="display: inline-block;width: 960px;height: 400px;float: left;margin-left: 15px">
          <div style="width: 99%; height: 40px;background-color: #F4FAFF;border-left: 3px solid #269DEA">
             <span style="line-height: 40px;margin-left: 5px;color: grey">员工信息：</span>
          </div>

          <el-form :model="form" style="margin-left: 3px;margin-top: 20px">
            <el-row>

            <el-clo :span="3">
              <el-form-item label="部 门：">
                <el-input v-model="form.bumen"  readonly />
              </el-form-item>
            </el-clo>
              <el-col :span="1"></el-col>
              <el-clo :span="3">
                <el-form-item label="岗 位：">
                  <el-input v-model="form.gangwei"  readonly />
                </el-form-item>
              </el-clo>
              <el-col :span="1"></el-col>
              <el-clo :span="3">
                <el-form-item label="职 级：">
                  <el-input v-model="form.zhiji"  readonly />
                </el-form-item>
              </el-clo>
            </el-row>

            <el-row>
              <el-clo :span="3">
                <el-form-item label="工 号：">
                  <el-input v-model="form.gonghao"   />
                </el-form-item>
              </el-clo>

              <el-col :span="1"></el-col>

              <el-clo :span="5">
                <el-form-item label="联系电话：">
                  <el-input v-model="form.phones"   />
                </el-form-item>
              </el-clo>



              <el-col :span="1"></el-col>

              <el-clo :span="5">
                <el-form-item label="电子邮件：">
                  <el-input v-model="form.youjian"   />
                </el-form-item>

              </el-clo>

            </el-row>

            <el-row>

              <el-clo :span="3">
                <el-form-item label="性 别：">
                  <el-input v-model="form.sex"   />
                </el-form-item>
              </el-clo>
              <el-col :span="1"></el-col>
              <el-clo :span="5">
                <el-form-item label="身份证号码：">
                  <el-input v-model="form.Idcard"   />
                </el-form-item>

              </el-clo>
              <el-col :span="1"></el-col>

              <el-clo :span="3">
                <el-button type="primary" @click="onSubmit">提 交</el-button>


              </el-clo>

            </el-row>

          </el-form>

          <div style="width: 99%; height: 40px;background-color: #F4FAFF;border-left: 3px solid #269DEA">
            <span style="line-height: 40px;margin-left: 5px;color: grey">财务信息：</span>
          </div>
          <el-form :model="form" style="margin-left: 3px;margin-top: 20px">
            <el-row>

              <el-clo :span="3">
                <el-form-item label="银 行：">
                  <el-input v-model="form.bumen"  readonly />
                </el-form-item>
              </el-clo>
              <el-col :span="1"></el-col>
              <el-clo :span="3">
                <el-form-item label="账户名称：">
                  <el-input v-model="form.gangwei"  readonly />
                </el-form-item>
              </el-clo>

            </el-row>



            <el-row>
              <el-clo :span="3">
                <el-form-item label="工资账户：">
                  <el-input v-model="form.zhiji"  readonly />
                </el-form-item>
              </el-clo>


              <el-col :span="1"></el-col>

              <el-clo :span="3">
                <el-button type="primary" @click="onSubmit">提 交</el-button>


              </el-clo>

            </el-row>

          </el-form>





        </div>



      </el-tab-pane>


      <el-tab-pane label="资产信息" name="second">

        <el-table :data="tableData" stripe :header-cell-style="{background:'#f5f7fa'}" :cell-style="{'text-align':'center'}" style="width: 100%">
          <el-table-column align='center' prop="bianhao" label="编 号"  />
          <el-table-column align='center' prop="mingcheng" label="名 称"  />
          <el-table-column align='center' prop="zhuangtai" label="状 态"  />
          <el-table-column align='center' prop="shulaing" label="数 量"  />
          <el-table-column align='center' prop="jine" label="金 额"  />
          <el-table-column align='center' prop="lingqu" label="是否领取"  />

        </el-table>

      </el-tab-pane>




    </el-tabs>
    </div>










  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, ref} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { reactive } from 'vue'
import {useStore} from "vuex";
import {useRouter} from "vue-router";

//获取登录者信息
const store =useStore();
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

//页面加载事件
onBeforeMount(()=>{
  form.bumen = store.state.user.sysEmployee.dept.deptName;
  form.gangwei = store.state.user.sysEmployee.employeePost.post.postName;
  form.zhiji = store.state.user.sysEmployee.employeePost.post.postLevel;
  form.gonghao = store.state.user.sysEmployee.empCard;
  form.phones = store.state.user.sysEmployee.empPhone;
  form.youjian = store.state.user.sysEmployee.empEmail;
  form.Idcard = store.state.user.sysEmployee.empIdcard;
  form.sex = store.state.user.sysEmployee.empSex==1?"男":"女";
});

let sex = store.state.user.sysEmployee.empSex;

//路由
const router=useRouter();
//转正申请
const zhuanzheng=()=>{
  router.push("/perrelationship/regularization/ap")
}
//离职申请
const lizhi=()=>{
  console.log(store.state.user.sysEmployee.empId)
    router.push({path:"/perrelationship/leaveoffice/ap",query:{id:store.state.user.sysEmployee.empId}})
}
let form = reactive({
  bumen: '',
  gangwei: '',
  zhiji: '',
  gonghao: '',
  phones: "",
  youjian: "",
  sex: '',
  Idcard: '',
})


const form2 = reactive({
  gzzhanghu: '123123122312312',
  yinhang: '建设银行',
  zmingcheng: '朱丽叶',
  gonghao: 'RT9527',

})


const onSubmit = () => {
  console.log('submit!')
}


const tableData = [
  {
    bianhao:"TX1234",
    mingcheng:"拯救者",
    zhuangtai:"良好",
    shulaing:"1",
    jine:"7000",
    lingqu:"否"
  },

]

</script>

<style scoped>

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


</style>